<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ETF网格交易3.0系统 - 综合策略压力测试</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1800px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.8em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .strategy-overview {
            background: #f8f9fa;
            padding: 20px;
            border-bottom: 1px solid #e9ecef;
        }

        .strategy-overview h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            text-align: center;
        }

        .strategy-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .strategy-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border-left: 4px solid #667eea;
        }

        .strategy-card h4 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .strategy-card p {
            color: #6c757d;
            font-size: 14px;
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 30px;
            padding: 30px;
        }

        .control-panel {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            border: 1px solid #e9ecef;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: #667eea;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .form-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #e9ecef;
        }

        .form-section h4 {
            color: #2c3e50;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #667eea;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s;
            width: 100%;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
        }

        .results-panel {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            border: 1px solid #e9ecef;
        }

        .grid-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .grid-table th, .grid-table td {
            padding: 12px;
            text-align: center;
            border-bottom: 1px solid #e9ecef;
        }

        .grid-table th {
            background: #2c3e50;
            color: white;
            font-weight: 600;
        }

        .grid-table tr:hover {
            background: #f8f9fa;
        }

        .chart-container {
            margin-top: 30px;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .stat-card h3 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .stat-card .value {
            font-size: 2em;
            font-weight: bold;
            color: #667eea;
        }

        .profit { color: #27ae60; }
        .loss { color: #e74c3c; }

        .multi-grid-controls {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .grid-config {
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        .grid-config h5 {
            color: #2c3e50;
            margin-bottom: 10px;
            text-align: center;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .checkbox-group input[type="checkbox"] {
            width: auto;
            margin-right: 10px;
        }

        .checkbox-group label {
            margin-bottom: 0;
            font-weight: normal;
        }

        .total-amount-display {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }

        .total-amount-display h3 {
            margin: 0 0 15px 0;
            color: #495057;
            font-size: 18px;
        }

        .amount-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }

        .amount-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background: white;
            border-radius: 6px;
            border: 1px solid #e9ecef;
        }

        .amount-item .label {
            font-weight: 500;
            color: #6c757d;
        }

        .amount-item .value {
            font-weight: bold;
            color: #28a745;
            font-size: 16px;
        }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
            .form-row {
                grid-template-columns: 1fr;
            }
            .multi-grid-controls {
                grid-template-columns: 1fr;
            }
            .strategy-cards {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>ETF网格交易3.0系统</h1>
            <p>综合策略压力测试平台 - 利润留存 + 逐格加码 + 大中小网</p>
        </div>

        <div class="strategy-overview">
            <h3>策略组合说明</h3>
            <div class="strategy-cards">
                <div class="strategy-card">
                    <h4>2.1 利润留存</h4>
                    <p>每次网格卖出时保留部分利润，让利润无限期持有，在强势上涨中获取更大收益。</p>
                </div>
                <div class="strategy-card">
                    <h4>2.2 逐格加码</h4>
                    <p>价格越低价值越大，每格增加投入，在底部获取更大利润。</p>
                </div>
                <div class="strategy-card">
                    <h4>2.3 大中小网</h4>
                    <p>同时运行多个不同幅度的网格系统，小网满足日常，中网改善生活，大网赚大钱。</p>
                </div>
            </div>
        </div>

        <div class="main-content">
            <div class="control-panel">
                <h2>综合策略配置</h2>
                
                <!-- 基础设置 -->
                <div class="form-section">
                    <h4>基础设置</h4>
                    <div class="form-group">
                        <label for="etfName">ETF品种</label>
                        <select id="etfName">
                            <option value="沪深300">沪深300</option>
                            <option value="中证500">中证500</option>
                            <option value="中证1000">中证1000</option>
                            <option value="创业板指">创业板指</option>
                            <option value="科创50">科创50</option>
                            <option value="消费">消费</option>
                            <option value="医药">医药</option>
                            <option value="医疗">医疗</option>
                            <option value="金融">金融</option>
                            <option value="环保">环保</option>
                            <option value="信息">信息</option>
                            <option value="食品饮料">食品饮料</option>
                            <option value="养老">养老</option>
                            <option value="红利">红利</option>
                            <option value="军工">军工</option>
                            <option value="传媒">传媒</option>
                            <option value="恒生">恒生</option>
                            <option value="中概">中概</option>
                            <option value="恒科">恒科</option>
                            <option value="标普">标普</option>
                            <option value="纳斯达克">纳斯达克</option>
                            <option value="畜牧">畜牧</option>
                            <option value="半导体">半导体</option>
                            <option value="券商">券商</option>
                            <option value="黄金">黄金</option>
                            <option value="原油">原油</option>
                            <option value="豆粕">豆粕</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="initialPrice">初始价格</label>
                        <input type="number" id="initialPrice" value="1.0" step="0.01" min="0.01">
                    </div>

                    <div class="form-group">
                        <label for="gridMode">网格模式</label>
                        <select id="gridMode" onchange="toggleGridInput()">
                            <option value="percentage">百分比模式</option>
                            <option value="fixed">固定步长模式</option>
                        </select>
                    </div>

                    <div class="form-group" id="percentageGroup">
                        <label for="gridSize">网格大小 (%)</label>
                        <input type="number" id="gridSize" value="5" step="0.5" min="1" max="20">
                    </div>

                    <div class="form-group" id="fixedGroup" style="display: none;">
                        <label for="gridStep">网格步长 (元)</label>
                        <input type="number" id="gridStep" value="0.05" step="0.01" min="0.01" max="1">
                    </div>

                    <div class="form-group">
                        <label for="baseAmount">基础投入金额</label>
                        <input type="number" id="baseAmount" value="10000" step="1000" min="1000">
                    </div>

                    <div class="form-group">
                        <label for="maxDecline">最大下跌幅度 (%)</label>
                        <input type="number" id="maxDecline" value="50" step="5" min="10" max="80">
                    </div>
                </div>

                <!-- 策略选择 -->
                <div class="form-section">
                    <h4>策略选择</h4>
                    <div class="checkbox-group">
                        <input type="checkbox" id="enableProfitRetention" checked>
                        <label for="enableProfitRetention">启用利润留存策略</label>
                    </div>
                    <div class="checkbox-group">
                        <input type="checkbox" id="enableProgressiveBetting" checked>
                        <label for="enableProgressiveBetting">启用逐格加码策略</label>
                    </div>
                </div>

                <!-- 利润留存设置 -->
                <div class="form-section" id="profitRetentionSection">
                    <h4>利润留存设置</h4>
                    <p style="color: #6c757d; font-size: 14px;">利润留存策略：每次网格卖出时，将全部利润转换为股数留存，股数为100的整数倍。</p>
                </div>

                <!-- 逐格加码设置 -->
                <div class="form-section" id="progressiveBettingSection">
                    <h4>逐格加码设置</h4>
                    <div class="form-group">
                        <label for="progressiveMode">逐格加码模式</label>
                        <select id="progressiveMode">
                            <option value="percentage">等比例增加</option>
                            <option value="fixed">固定金额增加</option>
                        </select>
                    </div>
                    <div class="form-group" id="percentageMode">
                        <label for="increaseRate">每格增加比例 (%)</label>
                        <input type="number" id="increaseRate" value="5" step="1" min="0" max="20">
                    </div>
                    <div class="form-group" id="fixedMode" style="display: none;">
                        <label for="increaseAmount">每格增加金额 (元)</label>
                        <input type="number" id="increaseAmount" value="1000" step="100" min="100">
                    </div>
                    <div class="form-group">
                        <label for="startFromGrid">从第几格开始加码</label>
                        <input type="number" id="startFromGrid" value="2" step="1" min="1" max="10">
                    </div>
                </div>

                <!-- 小中大网设置 -->
                <div class="form-section">
                    <h4>小中大网设置</h4>
                    <div class="multi-grid-controls">
                        <div class="grid-config">
                            <h5>小网</h5>
                            <div class="form-group" id="smallGridPercentage">
                                <label for="smallGridSize">网格大小 (%)</label>
                                <input type="number" id="smallGridSize" value="5" step="0.5" min="1" max="20">
                            </div>
                            <div class="form-group" id="smallGridFixed" style="display: none;">
                                <label for="smallGridStep">网格步长 (元)</label>
                                <input type="number" id="smallGridStep" value="0.05" step="0.01" min="0.01" max="1">
                            </div>
                            <div class="form-group">
                                <label for="smallGridLayers">网格层数</label>
                                <input type="number" id="smallGridLayers" value="8" step="1" min="3" max="15">
                            </div>
                            <div class="checkbox-group">
                                <input type="checkbox" id="smallGridProgressive" checked>
                                <label for="smallGridProgressive">启用逐格加码</label>
                            </div>
                        </div>

                        <div class="grid-config">
                            <h5>中网</h5>
                            <div class="form-group" id="mediumGridPercentage">
                                <label for="mediumGridSize">网格大小 (%)</label>
                                <input type="number" id="mediumGridSize" value="15" step="1" min="5" max="50">
                            </div>
                            <div class="form-group" id="mediumGridFixed" style="display: none;">
                                <label for="mediumGridStep">网格步长 (元)</label>
                                <input type="number" id="mediumGridStep" value="0.15" step="0.01" min="0.01" max="1">
                            </div>
                            <div class="form-group">
                                <label for="mediumGridLayers">网格层数</label>
                                <input type="number" id="mediumGridLayers" value="5" step="1" min="2" max="10">
                            </div>
                            <div class="checkbox-group">
                                <input type="checkbox" id="mediumGridProgressive" checked>
                                <label for="mediumGridProgressive">启用逐格加码</label>
                            </div>
                        </div>

                        <div class="grid-config">
                            <h5>大网</h5>
                            <div class="form-group" id="largeGridPercentage">
                                <label for="largeGridSize">网格大小 (%)</label>
                                <input type="number" id="largeGridSize" value="30" step="2" min="10" max="80">
                            </div>
                            <div class="form-group" id="largeGridFixed" style="display: none;">
                                <label for="largeGridStep">网格步长 (元)</label>
                                <input type="number" id="largeGridStep" value="0.30" step="0.01" min="0.01" max="1">
                            </div>
                            <div class="form-group">
                                <label for="largeGridLayers">网格层数</label>
                                <input type="number" id="largeGridLayers" value="3" step="1" min="2" max="8">
                            </div>
                            <div class="checkbox-group">
                                <input type="checkbox" id="largeGridProgressive" checked>
                                <label for="largeGridProgressive">启用逐格加码</label>
                            </div>
                        </div>
                    </div>
                </div>

                <button class="btn" onclick="runComprehensiveTest()">开始综合策略测试</button>
            </div>

            <div class="results-panel">
                <h2>测试结果</h2>
                
                <div class="stats-grid" id="statsGrid">
                    <!-- 统计卡片将在这里动态生成 -->
                </div>


                <!-- 总投入金额显示 -->
                <div class="total-amount-display" id="totalAmountDisplay" style="display: none;">
                    <h3>压力测试资金需求</h3>
                    <div class="amount-summary">
                        <div class="amount-item">
                            <span class="label">总投入金额：</span>
                            <span class="value" id="totalAmountValue">¥0</span>
                        </div>
                        <div class="amount-item">
                            <span class="label">小网投入：</span>
                            <span class="value" id="smallAmountValue">¥0</span>
                        </div>
                        <div class="amount-item">
                            <span class="label">中网投入：</span>
                            <span class="value" id="mediumAmountValue">¥0</span>
                        </div>
                        <div class="amount-item">
                            <span class="label">大网投入：</span>
                            <span class="value" id="largeAmountValue">¥0</span>
                        </div>
                    </div>
                </div>

                <!-- 剩余股数统计 -->
                <div class="total-amount-display" id="remainingSharesDisplay" style="display: none;">
                    <h3>剩余股数统计</h3>
                    <div class="amount-summary">
                        <div class="amount-item">
                            <span class="label">总剩余股数：</span>
                            <span class="value" id="totalRemainingShares">0股</span>
                        </div>
                        <div class="amount-item">
                            <span class="label">小网剩余：</span>
                            <span class="value" id="smallRemainingShares">0股</span>
                        </div>
                        <div class="amount-item">
                            <span class="label">中网剩余：</span>
                            <span class="value" id="mediumRemainingShares">0股</span>
                        </div>
                        <div class="amount-item">
                            <span class="label">大网剩余：</span>
                            <span class="value" id="largeRemainingShares">0股</span>
                        </div>
                    </div>
                </div>

                <table class="grid-table" id="gridTable">
                    <thead>
                        <tr>
                            <th>网格种类</th>
                            <th>档位</th>
                            <th>买入价</th>
                            <th>买入金额</th>
                            <th>入股数</th>
                            <th>卖出价</th>
                            <th>卖出金额</th>
                            <th>出股数</th>
                            <th>剩余股数</th>
                            <th>实际收益</th>
                            <th>收益率</th>
                        </tr>
                    </thead>
                    <tbody id="gridTableBody">
                        <!-- 网格数据将在这里动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="grid-trading-3.0.js"></script>
    <script>
        // 切换网格输入模式
        function toggleGridInput() {
            const gridMode = document.getElementById('gridMode').value;
            const percentageGroup = document.getElementById('percentageGroup');
            const fixedGroup = document.getElementById('fixedGroup');
            
            // 小网
            const smallPercentage = document.getElementById('smallGridPercentage');
            const smallFixed = document.getElementById('smallGridFixed');
            
            // 中网
            const mediumPercentage = document.getElementById('mediumGridPercentage');
            const mediumFixed = document.getElementById('mediumGridFixed');
            
            // 大网
            const largePercentage = document.getElementById('largeGridPercentage');
            const largeFixed = document.getElementById('largeGridFixed');
            
            if (gridMode === 'percentage') {
                percentageGroup.style.display = 'block';
                fixedGroup.style.display = 'none';
                smallPercentage.style.display = 'block';
                smallFixed.style.display = 'none';
                mediumPercentage.style.display = 'block';
                mediumFixed.style.display = 'none';
                largePercentage.style.display = 'block';
                largeFixed.style.display = 'none';
            } else {
                percentageGroup.style.display = 'none';
                fixedGroup.style.display = 'block';
                smallPercentage.style.display = 'none';
                smallFixed.style.display = 'block';
                mediumPercentage.style.display = 'none';
                mediumFixed.style.display = 'block';
                largePercentage.style.display = 'none';
                largeFixed.style.display = 'block';
            }
        }

        // 策略选择变化时的处理
        document.addEventListener('DOMContentLoaded', function() {
            const profitRetentionCheckbox = document.getElementById('enableProfitRetention');
            const progressiveBettingCheckbox = document.getElementById('enableProgressiveBetting');
            const progressiveModeSelect = document.getElementById('progressiveMode');

            function toggleSection(checkbox, sectionId) {
                const section = document.getElementById(sectionId);
                if (checkbox.checked) {
                    section.style.display = 'block';
                } else {
                    section.style.display = 'none';
                }
            }

            function toggleProgressiveMode() {
                const mode = progressiveModeSelect.value;
                const percentageMode = document.getElementById('percentageMode');
                const fixedMode = document.getElementById('fixedMode');
                
                if (mode === 'percentage') {
                    percentageMode.style.display = 'block';
                    fixedMode.style.display = 'none';
                } else {
                    percentageMode.style.display = 'none';
                    fixedMode.style.display = 'block';
                }
            }

            profitRetentionCheckbox.addEventListener('change', function() {
                toggleSection(this, 'profitRetentionSection');
            });

            progressiveBettingCheckbox.addEventListener('change', function() {
                toggleSection(this, 'progressiveBettingSection');
            });

            progressiveModeSelect.addEventListener('change', toggleProgressiveMode);

            // 初始化显示状态
            toggleSection(profitRetentionCheckbox, 'profitRetentionSection');
            toggleSection(progressiveBettingCheckbox, 'progressiveBettingSection');
            toggleProgressiveMode();
        });
    </script>
</body>
</html>